<template>
	<view class="mall-buy-bar">
		<view class="icons">
			<text @click="toMall" class="iconfont iconhome1 "></text>
			<view @click="toCart" class="cart-badge">
				<text class="iconfont iconcart"></text>
				<text class="badge" v-if="badge&&badge>0">{{badge}}</text>
			</view>
			<text class="iconfont iconlianximaijia-dingdanxiangqing"></text>
		</view>
		<view class="btns">
			<view class="btn cart" @click="cart">
				<text class="txt">加入购物车</text>
			</view>
			<view class="btn buy" @click="buy">
				<text class="txt">立即购买</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			badge:Number
		},
		methods:{
			    toMall(){
					this.$Router.pushTab("/pages/mall/mall")
				},
				toCart(){
					this.$Router.pushTab("/pages/mall/cart")
				},
				buy(){
					this.$emit("buy")
				},
				cart(){
					this.$emit("cart")
				}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="stylus">
	.mall-buy-bar
		height:87upx;
		background:rgba(255,255,255,1);
		display flex
		.icons
			flex 1
			display flex
			align-items center
			justify-content space-between
			padding-left 20upx
			.iconfont
				color #A24545
				font-size 40upx
			.cart-badge
				position relative
				.badge
					position absolute
					top -2upx
					right -2upx
					color white
					font-size 14upx
					height 22upx
					width 22upx
					text-align center
					line-height 22upx
					background-color red
					border-radius 50%
					
		.btns
			padding 0 20upx
			display flex
			align-items center
			.btn
				width:222upx;
				height:70upx;
				display flex
				align-items center
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				justify-content center
				color white
				&.cart
					border-radius 45upx 0 0 45upx
					background-color #A14545
				&.buy
					border-radius 0upx 45upx 45upx 0
					background-color #F7895E
					
			
</style>
